<template>
  <div>
    <div class="error">
      <h2>
        <img src="../../../static/images/error.jpg" alt="">
      </h2>
      <div class="errorText">
        <p class="errorTips">
          <b >OH NO!</b>
          <span>页面<br>错误</span>
        </p>
        <p class="t">程序猿在睡觉......</p>
        <p class="t">逛一逛其他页面吧</p>
      </div>
      <p class="backIndexBtn">
        <a  class="backPrevPage" @click.stop="back">返回上一页</a>
        <a  class="backIndexPage"  @click.stop="backIndex">返回首页</a>
      </p>
    </div>
  </div>

</template>
<script>
  export default({
    data (){
        return {

        }
    },
    methods:{
      back(){
          this.$router.go(-1)
      },
      backIndex(){
        this.$router.push({
          name:'pageIndex'
        })
      }

    }
  })
</script>
<style scoped="">
  .error{
    text-align: center;
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
  }
  .error h2{
    margin-top: 0.5rem;
  }
  .error h2 img{
    color: #000;
  }
  .backIndexBtn{
    text-align: center;
    margin-top: 0.1rem;
  }
  .backIndexBtn a.backIndexPage{
    display: inline-block;
    font-size: 0.32rem;
    color: #c50000;
    padding-left: 0.7rem;
    background-image: url("../../../static/images/index.png");
    background-repeat: no-repeat;
    background-position: 0.2rem center;
    background-size: 0.32rem 0.32rem;
  }
  .backIndexBtn a.backPrevPage{
    display: inline-block;
    font-size: 0.32rem;
    color: #c50000;
    padding-left: 0.7rem;
    background-image: url("../../../static/images/prevPage.png");
    background-repeat: no-repeat;
    background-position: 0.2rem center;
    background-size: 0.32rem 0.32rem;
    margin-right: 0.5rem;
  }
  .errorText .errorTips{

    color: #000;
    height: 0.8rem;
  }
  .errorText .errorTips b{
    display: inline-block;
    vertical-align: top;
    font-size: 0.8rem;
    margin-top: -0.2rem;
  }
  .errorText .errorTips span{
    display: inline-block;
    vertical-align: top;
    font-size: 0.32rem;
    text-align: center;
    color: #c50000;
  ;line-height: 1.1;
  }
  .t{
    font-size: 0.3rem;
    color: #000;
    padding: 0.05rem 0;
  }
</style>

